<template>
  <view class="home-page">
    <!-- Logo 区域 -->
    <view class="logo-container">
      <view class="logo-placeholder">LOGO</view>
    </view>
    <!-- 搜索框 -->
    <view class="search-container">
      <input class="search-input" type="text" placeholder="请输入搜索内容" />
      <u-icon name="search" color="#2979ff" size="28"></u-icon>
    </view>

    <!-- 列表 -->
    <view class="pk-list">
      <view v-for="(item, index) in pkList" :key="index" class="pk-card">
        <!-- 第一行：时间 & 头像滑动 23238080802323-->
        <view class="row top-row">
          <!-- 时间信息块 -->
          <view class="time-info">
            <view class="year">{{ item.year }}</view>
            <view class="date">{{ item.date }}</view>
            <view class="time-range">{{ item.time }}</view>
          </view>

          <!-- 头像滑动部分 -->
          <view class="avatar-slide-wrap">
            <u-icon name="arrow-left" @click="slideLeft(index)" />
            <scroll-view scroll-x class="avatar-scroll"
              :scroll-into-view="currentScrollIntoView === index ? ('avatar-' + scrollIndexList[index]) : ''"
              scroll-with-animation>
              <view class="avatar-row">
                <image v-for="(avatar, aIndex) in item.avatars" :key="aIndex" :id="'avatar-' + aIndex" :src="avatar"
                  class="avatar" mode="aspectFill" />
              </view>
            </scroll-view>
            <u-icon name="arrow-right" @click="slideRight(index)" />
          </view>
        </view>

        <!-- 活动标题、地点、详情箭头 -->
        <view class="row bottom-row">
          <view class="info-left">
            <view class="pk-title">{{ item.title }}</view>
            <view class="location-wrap">
              <u-icon name="bag" color="#999" :size="28" />
              <text class="location-text">{{ item.location }}</text>
            </view>
          </view>

          <!-- 详情箭头: 点击跳转详情 -->
          <view class="info-right" @click="goDetail(item)">
            <u-icon name="arrow-right" color="#666" :size="36" />
          </view>
        </view>
      </view>
    </view>
    <tabbar currentTab="pk"></tabbar>

  </view>
</template>

<script>
import tabbar from '@/components/tabbar/tabbar'

export default {
  components: {
    tabbar
  },
  data() {
    return {
      searchValue: "",
      pkList: [
        {
          year: 2024,
          date: "06/28",
          time: "10:00-12:00",
          title: "Rosie Carr 组织的拉丝PK赛",
          location: "成都市麓山国际高尔夫球会",
          avatars: [
            "https://dummyimage.com/80x80/ff7f7f/333.png&text=A1",
            "https://dummyimage.com/80x80/7fbfff/333.png&text=A2",
            "https://dummyimage.com/80x80/ffe57f/333.png&text=A3",
            "https://dummyimage.com/80x80/7fffa1/333.png&text=A4",
          ],
        },
        {
          year: 2024,
          date: "06/28",
          time: "10:00-12:00",
          title: "另一个校友约球活动",
          location: "成都某某高尔夫球会",
          avatars: [
            "https://dummyimage.com/80x80/a07fff/333.png&text=B1",
            "https://dummyimage.com/80x80/ffd17f/333.png&text=B2",
            "https://dummyimage.com/80x80/7f95ff/333.png&text=B3",
            "https://dummyimage.com/80x80/a07fff/333.png&text=B1",
            "https://dummyimage.com/80x80/ffd17f/333.png&text=B2",
            "https://dummyimage.com/80x80/7f95ff/333.png&text=B3",
            "https://dummyimage.com/80x80/a07fff/333.png&text=B1",
            "https://dummyimage.com/80x80/ffd17f/333.png&text=B2",
            "https://dummyimage.com/80x80/7f95ff/333.png&text=B3",

          ],
        },
      ],

      // 记录 scroll-view 滚动位置
      scrollIndexList: [0, 0], // 每个卡片对应的当前滚动到哪个头像下标
      currentScrollIntoView: null,
    };
  },
  methods: {
    handleSearch() {
      console.log("搜索内容：", this.searchValue);
    },
    // 左箭头
    slideLeft(cardIndex) {
      if (this.scrollIndexList[cardIndex] > 0) {
        this.scrollIndexList[cardIndex]--;
        this.currentScrollIntoView = cardIndex;
      }
    },
    // 右箭头
    slideRight(cardIndex) {
      const maxIndex = this.pkList[cardIndex].avatars.length - 1;
      if (this.scrollIndexList[cardIndex] < maxIndex) {
        this.scrollIndexList[cardIndex]++;
        this.currentScrollIntoView = cardIndex;
      }
    },
    // 跳转详情
    goDetail(item) {
      uni.navigateTo({
        url: "/pages/pk/pkDetail?title=" + item.title,
      });
    },
  },
};
</script>

<style scoped>
.home-page {
  background-color: #0082d8;
  /* 蓝色背景 */
  padding-bottom: 50px;
  /* 底部预留空间 */
  padding-top: 80px;
  height: calc(100% - 120rpx);
  overflow-y: scroll;
}

/* 列表区域 */
.pk-list {
  margin-top: 10rpx;
  padding: 0 20rpx;
}

/* 卡片 */
.pk-card {
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  position: relative;
}



/* 两行结构 */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-row {
  margin-top: 40rpx;
  /* 给上面“校友PK”标签留点空间 */
  margin-bottom: 20rpx;
}

.bottom-row {
  margin-top: 0rpx;
  margin-bottom: 0rpx;
}

/* 时间信息块 */
.time-info {
  width: 200rpx;
  /* 可根据UI或实际需求调整 */
}

.time-info .year {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.time-info .date {
  font-size: 36rpx;
  font-weight: bold;
  color: #0099ff;
  margin: 6rpx 0;
}

.time-info .time-range {
  font-size: 24rpx;
  color: #666;
}

/* 头像滑动部分 */
.avatar-slide-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.avatar-scroll {
  width: 300rpx;
  /* 只显示固定宽度(例如3个头像大小) */
  margin: 0 10rpx;
  overflow: hidden;
  /* 避免多头像溢出 */
}

.avatar-row {
  display: flex;
}

.avatar {
  min-width: 60rpx;
  min-height: 60rpx;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

/* 活动信息 + 定位 */
.info-left {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pk-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.location-wrap {
  display: flex;
  align-items: center;
}

.location-text {
  margin-left: 8rpx;
  color: #666;
  font-size: 24rpx;
}

/* 详情箭头 */
.info-right {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo 区域 */
.logo-container {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.logo-placeholder {
  width: 120px;
  height: 50px;
  background-color: #ffffff;
  color: #0082d8;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
}

/* 搜索框 */
.search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 20px;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 5px 10px;
}

.search-input {
  flex: 1;
  height: 40px;
  border: none;
  outline: none;
  font-size: 14px;
  color: #666;
  padding-left: 10px;
}

.search-input::placeholder {
  color: #aaa;
}

.search-icon-placeholder {
  width: 20px;
  height: 20px;
  background-color: #cccccc;
  border-radius: 50%;
  margin-left: 10px;
}
</style>